<template>
  <div id="app">
    <TabBar @select-item="onClickTabBarItem" v-show="$route.meta.showHeadNav"/>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

    <footerArea v-show="$route.meta.showFooter"/>

  </div>
</template>

<script src="./assets/iconfont/iconfont.js" ></script>
<script type="script">

import footerArea from './components/home/footerArea'
import TabBar from './components/home/headNav'

export default {
  name: 'app',
  components: {
    footerArea,
    TabBar
  },
  data(){
      return {
      }
  },
  methods: {
        onClickTabBarItem: function (tag) {
            if (tag === 0) {
                this.$router.replace({name: "Home"});
                this.navTitle = '首页';
                this.isTop = false;
            } else if (tag === 1) {
                this.$router.replace({name: "sortPage"});
                this.navTitle = '商户';
                this.isTop = false;
            } else if (tag === 2) {
                this.$router.replace({name: "Me"});
                this.navTitle = '我';
                this.isTop = false;
            }
        },
        isNeedHiddenTabBar: function (isNeed) {
            this.isTop = !isNeed;
        }
    }
}
</script>


<style scoped>
  @import './assets/iconfont/iconfont.css';
  @import './assets/iconfont/demo.css';
 /* 图标csdn地址*/
  @import '//fonts.useso.com/css?family=Roboto:300,400,500,700,400italic';
  @import 'http://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css';
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
